<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>umeditor编辑器</title>
    <link href="./resources/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./resources/umeditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" src="./resources/umeditor/third-party/template.min.js"></script>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="./resources/umeditor/umeditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="./resources/umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="./resources/umeditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="./resources/umeditor/dialogs/map/map.js"></script>

    <h1>UMEDITOR 完整demo</h1>

    <!--style给定宽度可以影响编辑器的最终宽度-->
    <script type="text/plain" id="myEditor" style="width:1000px;height:440px;">
         <p>这里我可以写一些输入提示</p>
    </script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var um = UM.getEditor('myEditor',{
            toolbar:[
                'bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
                'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
                '| justifyleft justifycenter justifyright justifyjustify |',
                'link unlink | emotion image',
                '| horizontal preview fullscreen'
            ]
        });
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(UM.getEditor('myEditor').getContent());
            alert(arr.join("\n"));
        }
    </script>

    <button class="btn" onclick="getContent()">获得内容</button>&nbsp;
</head>
<body>
</body>
</html>